<script lang="ts" setup>
import { AppGetRebateBonus } from '#components'

defineOptions({
  name: 'AppRealTimeRebateDetailDialog',
})

interface Props {
    openGetBonusDialog: () => void
  close: () => void
  currency_id: CurrencyCode
  game_type: number
}
const props = defineProps<Props>()

const nuxtApp = useNuxtApp()
const i18n = nuxtApp.$i18n
const { t: $t } = i18n
const { data: rebateDetail, runAsync: runGetData, loading: loadingRebateDetail } = useRequest(ApiMemberRebateDetail)

const dataResource = computed(() => rebateDetail.value?.map(r => ({ ...r, time: r.date })) ?? [])
const currencyId = computed(() => props.currency_id)
const gameType = computed(() => (props.game_type))

const currentDetail = computed(() => ({ currency_id: currencyId.value, game_type: gameType.value }))

const columns = computed<Column[]>(() => [
  {
    title: $t('time'),
    dataIndex: 'time',
    align: 'center',
    slot: 'created_at',
  },
  {
    title: $t('platform_label'),
    dataIndex: 'platform_name',
    align: 'center',
    slot: 'platform_name',
  },
  {
    title: $t('menu_title_settings_bets'),
    dataIndex: 'valid_bet_amount',
    align: 'center',
    slot: 'valid_bet_amount',
  },
  {
    title: $t('amount'),
    dataIndex: 'rebate_amount',
    align: 'center',
    slot: 'rebate_amount',
  },
])

function getPlatName(name: string, id: string) {
  if (name && name.length && id && id.length) {
    if (name.toLowerCase() === 'casino games' || id[0] === '8')
      return $t('casino_game2')
    else if (name.toLowerCase() === 'im' || name.toLowerCase() === 'inplay matrix' || id[0] === '4')
      return $t('sports')
  }
  return name
}

function closeDialog() {
  props.close && props.close()
  setTimeout(() => {
    props.openGetBonusDialog() // 重新打开获取返水的弹窗
  }, 0)
}

runGetData(currentDetail.value)
</script>

<template>
  <div class="h-full">
    <div v-if="loadingRebateDetail" class="center h-[20vh]">
      <BaseLoading />
    </div>
    <div v-else class="app-realtime-rebate-detail h-full flex flex-col" @touchstart.stop @touchmove.stop>
      <div class="flex items-center justify-between before:size-[1.75rem]">
        <h2 class="flex items-center">
          <span class="text-sm font-semibold mr-1">{{ $t('detail') }}</span>
          <AppCurrencyIcon v-if="currentDetail && currentDetail.currency_id" :currency-type="getCurrencyConfigByCode(currentDetail.currency_id)?.name" />
        </h2>
      <BaseButton class="close size-[1.75rem] bg-[#4A5354] center rounded-md" type="none" @click.stop="close(true)">
        <BaseIcon name="uni-close2" class="text-xs" />
      </BaseButton>
      </div>
      <div class="scroll-y flex flex-1 flex-col" @touchstart.stop @touchmove.stop>
        <div>
          <BaseTable
            :columns="columns" :data-source="dataResource" :loading="loadingRebateDetail"
            :show-out-load="true" 
            class="rounded-md"
            style="font-size: 1rem;color:var(--color-text-white-2);"
          >
            <template #platform_name="{ record: { platform_name, platform_id } }">
              <div class="text-xs">
                {{ getPlatName(`${platform_name}`, `${platform_id}`) }}
              </div>
            </template>
            <template #created_at="{ record: { time } }">
              <div v-if="time" class="text-xs">
                {{ timeToFormatDiffOnChinese(new Date(time).getTime(), 'MM/DD') }}
              </div>
            </template>
            <template #valid_bet_amount="{ record: { valid_bet_amount, currency_id } }">
              <div class="center">
                <AppAmount :amount="valid_bet_amount" :currency-code="currency_id" :show-icon="false" />
              </div>
            </template>
            <template #rebate_amount="{ record: { rebate_amount, currency_id } }">
              <div class="center">
                <AppAmount show-color :amount="rebate_amount" :currency-code="currency_id" :show-icon="false" />
              </div>
            </template>
          </BaseTable>
        </div>
      </div>
        <BaseButton class="mt-4 w-full text-sm" bg-style="secondary" size="xl" style="--tg-base-button-font-size:var(--tg-font-size-base)" @click="closeDialog">
          {{ $t('navigation_back') }}
        </BaseButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-realtime-rebate-detail {
  --tg-table-td-padding-x: 0;
  --tg-table-th-padding-x: 0;
  --tg-app-currency-icon-size: 1rem;
  --bc-table-th-font-size: 0.75rem;
  --tg-app-amount-font-size:0.75rem;
  .special-amount{
    --bc-amount-font-color: #24EE89;
  }
}

</style>
